<template>
  <div :id="id" style="margin: 0 auto;" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import { upFixed, downFixed } from '@/utils'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    data1: {
      type: Array,
      default: () => {
        return []
      }
    },
    data2: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))

      const series = [
        { name: '成分基金', type: 'scatter', data: [] },
        { name: '模型测算方案', type: 'scatter', data: [] }
      ]

      this.data1.forEach(item => {
        series[0].data.push([item.yearAnnualizedincomeRate, item.yearAnnualfluctuationsRate])
      })
      series[1].data.push([this.data2.yearIncomRate, this.data2.yearVolityRate])

      this.chart.setOption({
        grid: {
          top: '12%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        legend: {
          x: 'center',
          bottom: '0',
          itemWidth: 12,
          textStyle: {
            color: '#90979c'
          },
        },
        tooltip: {
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderWidth: 0,
          textStyle: {
            color: '#FFF'
          },
          formatter: (params) => {
            return `<div style="padding-bottom: 2px;">${params.marker} ${params.seriesName}</div>
                    <div style="display: flex;align-items: center;">
                    <span style="flex:1;">年化收益率:</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params.value[1]}%</span>
                    </div>
                    <div style="display: flex;align-items: center;">
                    <span style="flex:1;">年化波动率</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params.value[0]}%</span>
                    </div>`
          }
        },
        xAxis: { 
          name: '年化波动率(%)',
          nameLocation: 'center',
          nameGap: 25,
          // gridIndex: 0,
          min: function(value) {
            const res = downFixed((value.min - (value.max - value.min) / 2), 1)
            return res
          },
          max: function(value) {
            const res = upFixed((value.max + (value.max - value.min) / 2), 1)
            return res
          },
          // min: 0,
          // max: 5,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        yAxis: { 
          name: '年化收益率(%)',
          nameLocation: 'center',
          nameGap: 40,
          // gridIndex: 0,
          min: function(value) {
            const res = downFixed((value.min - (value.max - value.min) / 2), 1)
            return res
          },
          max: function(value) {
            const res = upFixed((value.max + (value.max - value.min) / 2), 1)
            return res
          },
          // min: 0,
          // max: 5,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        series
      })
    }
  }
}
</script>
